<!-- 业务派单升级页面 -->
<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    modal
    class="pms-dialog"
    v-bind="$attrs"
    width="38%"
    v-on="$listeners"
  >
    <div class="container">
      <div ref="queryFormBoxTwo" class="search-flex-box">
        <el-form
          ref="validataForm"
          :model="formVal"
          label-width="260px"
          class="el-form pms-form"
          size="mini"
          :inline="true"
          style="line-height: 28px;"
        >
          <el-row :gutter="24">
            <el-col :span="9">
              <el-form-item label="姓名" style="width:100%;" prop="zanguMoney">
                <el-input v-model.trim="formVal.name" style="width:160px" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="账号" style="width:100%;" prop="zanguMoney">
                <el-input v-model.trim="formVal.loginName" style="width:160px" />
                <el-input v-model.trim="formVal.id" hidden />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="searchBtn">
          <el-button type="primary" class="pms-button-primary" @click="transferRecordAdd">查询</el-button>
        </div>
      </div>
      <div v-if="isShowAgent" class="select">
        <div class="box">
          <div class="title">可选办理人(内部人员)</div>
          <div class="content">
            <el-tree
              ref="userTree"
              class="userTree-container"
              empty-text=""
              :data="toSelectdata"
              default-expand-all
              icon-class=""
              @current-change="currentChange"
              @node-click="userClick"
            >
              <template slot-scope="{ node, data }">
                <span class="custom-tree-node">
                  <span v-if="!data.isLeaf" style="margin-right: 6px;font-size: 14px;color: #606266;" :class="[node.expanded ? 'el-icon-folder-opened' : 'el-icon-folder']" />
                  <span v-else style="margin-right: 6px;font-size: 14px;color: #606266;" class="el-icon-user" />
                  <span style="font-size: 14px;color: #606266;">{{ data.text }}&nbsp;&nbsp;{{ data.loginName?`(${data.loginName})`: '' }}</span>
                </span>
              </template>
            </el-tree>
          </div>
        </div>

      </div>
      <div class="containerTwo">
        <div class="select">
          <div class="box">
            <div class="title">已选办理人</div>
            <div class="contentTwo">
              <div v-if="userSelectedName" class="user-select-item">
                <span class="el-icon-user" style="margin-right: 6px;" />
                <span>{{ userSelectedName }}&nbsp;&nbsp;{{ selectedUserId ? `(${selectedUserId})` : '' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="message">
        <el-form ref="nextPageForm" class="pms-details" :model="form" :rules="rules" label-width="100">
          <el-form-item label="办理意见" prop="opinion">
            <div style="display: flex; margin-right: 10px;">
              <el-button type="text" class="btnColor" @click="doOpenCommonOpinion">
                （自定义常用意见）
              </el-button>
              <el-select v-model="opinion" placeholder="请选择" class="pms-select" size="mini" style="margin-left: 10px" @change="handleSelectChange">
                <el-option
                  v-for="item in opinions"
                  :key="item.id"
                  :value="item.opinion"
                />
              </el-select>
            </div>
          </el-form-item>
          <el-input v-model="form.opinion" class="pms-textarea" type="textarea" placeholder="请输入办理意见" :rows="4" maxlength="500" />
        </el-form>
      </div>
    </div>
    <div slot="footer">
      <el-button class="pms-button-primary" @click="confirm">确 定</el-button>
      <el-button class="pms-button-primary" @click="cancel">取 消</el-button>
    </div>

    <!--常用意见列表-->
    <common-opinion v-if="ifCommonOpinion" :visible.sync="ifCommonOpinion" @close="ifCommonOpinion = false" />
  </el-dialog>

</template>

    <script>
    import { getCommonOpinion } from '@/api/workFlow'
    import CommonOpinion from '@/components/nextPerson/commonOpinionList'
    import { getSendStaffTree, getServicerSendStaffTree } from '@/api/businessOperation/index' // 列表接口

    export default {
      name: 'SendordersReassignPage',
      components: { CommonOpinion },
      props: {
        title: {
          type: String,
          default: '项目升级'
        },
        // 办理意见是否必填
        opinionValid: {
          type: Boolean,
          default: true
        },
        // 是否展示下一步节点或办理人
        isShowAgent: {
            type: Boolean,
            default: true
        }
      },
      data() {
        return {
          detailId: '',
          nTemplateId: '',
          userSelected: {}, // 已选择的人员节点
          toSelectdata: [], // 可选办理人树型(内部人员)
          toSelectdataTwo: [], // 可选办理人树型(服务商)
          actDefIdSelected: '', // 已选择的节点id
          formVal: {}, // 派单人选择
          form: {
            opinion: '' // 办理意见
          },
          rules: {
            opinion: [
              { required: true, message: '请输入办理意见', trigger: 'change' }
              // { min: 10, message: '至少输入10个字', trigger: 'blur' }
            ]
          },
          finishNode: false,
          selectedUserId: '', // 已选办理人账号
          opinion: '',
          finish: false,
          opinions: [],
          ifCommonOpinion: false, // 常用意见页面
          userClickArr: []
        }
      },
      computed: {
        userSelectedName() {
          return this.userSelected.empName
        }
      },
      watch: {
        opinionValid: {
          handler: function(newVal) {
            if (!newVal) {
              this.rules = {}
            }
          },
          immediate: true
        }
      },
      mounted() {
        this.transferRecordAdd()
        this.getCommonOpinions()
      },
      methods: {
        transferRecordAdd() {
          const pramse = { name: this.formVal.name, loginName: this.formVal.loginName, id: this.formVal.id }
          // (内部人)
          getSendStaffTree(pramse).then(res => {
            if (+res.code !== 200) {
                  return Promise.reject(res)
        }
              this.toSelectdata = res.data
            console.log(this.toSelectdata, 'this.toSelectdata')
          })
          // (服务商)
        //   getServicerSendStaffTree(pramse).then(res => {
        //       if (+res.code !== 200) return Promise.reject(res)
        //       this.toSelectdataTwo = res.data
        //   })
        },
        currentChange(data, node) {
          console.log(data, 'data');
        },
        userClick(data, node) {
          if (data.isLeaf && node.expanded) {
            this.userClickArr = data
            const { id: empId, text: empName } = data
            this.userSelected = { empId, empName }
            this.selectedUserId = data.loginName
          }
        },
        // 提交后返回值
        doEmit() {
          const doNextEntityVal = {
            loginName: this.userClickArr.loginName,
            opinion: this.form.opinion,
            id: this.userClickArr.id,
            sendMode: 1,
            test: this.userClickArr.test
          }
          this.$emit('doNextEntity', doNextEntityVal)
          this.$emit('update:visible', false)
        },
        // 确认
        confirm() {
          if (this.isShowAgent && !this.finishNode && !Object.keys(this.userSelected).length) {
            this.$message({
              message: '请选择下一节点办理人',
              type: 'error'
            })
            return
          }
          this.opinionValid && this.$refs['nextPageForm'].validate((valid) => {
            // 校验通过
            valid && this.doEmit()
          })
          if (!this.opinionValid) {
            this.doEmit()
          }
        },
        // 取消
        cancel() {
          this.$refs['nextPageForm'].resetFields()
          this.$emit('selected', {})
          this.$emit('update:visible', false)
        },
        handleSelectChange(value) {
            this.$set(this.form, 'opinion', value)
        },
        // 获取常用意见
        getCommonOpinions() {
            getCommonOpinion().then(res => {
              if (+res.code !== 200) {
                  return Promise.reject(res)
        }
                this.opinions = res.data
            })
        },
        // 打开常用意见页面
        doOpenCommonOpinion() {
            this.ifCommonOpinion = true
        }
      }
    }
    </script>
    <style lang='scss' scoped>
    ::v-deep .el-dialog__body {
        padding: 20px;
    }
      .container {
        .select {
          display: flex;
          align-items: center;
          .box {
            width: 100%;
            &:nth-child(n+2){
              margin-left: 10px;
            }
          }
          .title {
            width: 100%;
            height: 36px;
            line-height: 36px;
            text-align: left;
            font-size: 17px;
            font-weight: 900;
            // color: rgb(227, 47, 47);
            color: #eb4b4b;
          }
          .content {
            height: 250px;
            border: 1px solid #ccc;
            overflow: hidden;
            .node-item {
              height: 30px;
              line-height: 30px;
            //   text-align: left;
              text-indent: 1em;
              font-size: 12px;
              width: 100%;
              background-color: #DBDBDB;
              &:hover {
                cursor: pointer;
              }
              &.clicked {
                background-color: #ffefe5;
                color: #eb4b4b;
              }
            }
            .user-item {
              height: 22px;
              line-height: 22px;
            }
            .user-select-item {
              height: 30px;
              line-height: 30px;
              text-align: center;
              font-size: 12px;
              width: 100%;
              background-color: #F4F6F8;
            }
          }
          .icon {
            margin-right: 6px;
            font-size: 14px;
          }
          ::v-deep .el-icon-caret-right:before {
            content: ''
          }
        }
        .message {
          //margin-top: 10px;
          text-align: left;
        }
        .nextTips{
          margin-top: 5px;
          text-align: left;
        }
      }
      .userTree-container{
        height: 250px;
        overflow-y: auto;
      }
      .nextPageTittle{
        text-align: left;
        line-height: 24px;
        font-size: 18px;
        color: #303133;
      }
    .el-button--text {
        // color: #02A7F0;
        color: #1b3f91;
        padding: 0;
        margin-bottom: 10px;
        line-height: 16px;
    }
    ::v-deep .el-form-item__error {
        line-height: 0;
        top: 120px;
        left: -60px;
    }

    .containerTwo {
        .select {
          .box {
            width: 100%;
            &:nth-child(n+2){
              margin-left: 10px;
            }
          }
          .title {
            width: 100%;
            height: 36px;
            line-height: 36px;
            text-align: left;
            font-size: 17px;
            font-weight: 900;
            // color: rgb(227, 47, 47);
            color: #eb4b4b;
          }
          .contentTwo {
            height: 30px;
            border: 1px solid #ccc;
            overflow: hidden;
            .node-item {
              height: 30px;
              line-height: 30px;
            //   text-align: left;
              text-indent: 1em;
              font-size: 12px;
              width: 100%;
              background-color: #DBDBDB;
              &:hover {
                cursor: pointer;
              }
              &.clicked {
                background-color: #ffefe5;
                color: #eb4b4b;
              }
            }
            .user-item {
              height: 22px;
              line-height: 22px;
            }
            .user-select-item {
              height: 30px;
              line-height: 30px;
              text-align: center;
              font-size: 12px;
              width: 100%;
              background-color: #F4F6F8;
            }
          }
          .icon {
            margin-right: 6px;
            font-size: 14px;
          }
          ::v-deep .el-icon-caret-right:before {
            content: ''
          }
        }
        .message {
          //margin-top: 10px;
          text-align: left;
        }
        .nextTips{
          margin-top: 5px;
          text-align: left;
        }
      }

      .search-flex-box {
          display: flex;
          justify-content: space-between;
          height: auto;
      }
      .searchBtn {
          width: 100px;
          margin-left: auto;
          display: flex;
          margin-top: 0px;
          flex-direction: column;
          .el-button + .el-button {
              margin-left: 0;
              margin-top: 8px;
          }
      }
    </style>
